<template>
    <div class="extensioncenter">
      <div class="extension_head">
        <div class="extension_info">
          <span class="extension_info_span1">
            <span>
              <img :src="headimgurl" alt="">
             <p>{{nickname}}</p>
            </span>
            <router-link to="turntrue">
              <p class="turntrue">立即提现</p>
            </router-link>
          </span>
          <span class="extension_info_span2">
            <p>&yen;{{profit_price}}</p>
            <p>累积推广收益</p>
          </span>
          <span class="extension_info_span3">
            <span>
              <router-link to="accumulateduser">
              <p>累积客户 <strong>{{user_num}}</strong> </p>
                </router-link>
            </span>
              <span @click="tuiguang">
                   <p>推广订单  <strong>{{order_num}}</strong></p>
              </span>
          </span>
        </div>
      </div>
      <scroll class="wrapper" :data="extensionlist" :pullup="pullup" :pulldown="pulldown" @pulldown="loadData"  @pullup="nextpage">
      <ExtensionList :extensionlist="extensionlist"></ExtensionList>
        <PageTip :tipshow="tipshow"></PageTip>
      </scroll>

    </div>
</template>

<script>
import ExtensionList from './components/ExtensionList'
import { Dialog } from 'vant'
import * as fetch from '@/api/fetch'
import Vue from 'vue'
import Scroll from "@/components/Scroll"
import PageTip from "./../MoreBoom/components/PageTip"

Vue.use(Dialog)


export default {
  name: 'ExtensionCenter',
  data () {
    return {
      headimgurl: '',
      nickname: '',
      user_num: '',
      order_num: '',
      profit_price: '',

      tipshow:1,
      page:1,

      pullup:true,
      pulldown:true,

      extensionlist: []
    }
  },
  methods: {
    tuiguang () {
      if (this.order_num == 0) {
        Dialog.alert({
          title: '提示',
          message: '暂无推广订单'
        }).then(() => {
          // on close
        })
      } else {
        this.$router.push({ path: '/extensionorder' })
      }
    },

    loadData(){
      this.tipshow=1
      this.getSpreadVideoList(1).then( res =>{
        if (res.data.length > 0) {
          this.extensionlist = res.data
        } else {
        }
      })
    },
    nextpage(){
      this.page=this.page+1
      this.getSpreadVideoList(this.page).then(res=>{
        if(res.data.length > 0){
          this.extensionlist = this.extensionlist.concat(res.data)
        }else {
          this.page=this.page-1
          this.tipshow = 0
        }
      })
    },

    async getSpreadDataByUser () {
      const res = await fetch.getSpreadDataByUser()
      console.log(res)
      this.headimgurl = res.data.headimgurl,
      this.nickname = res.data.nickname
      this.order_num = res.data.order_num,
      this.user_num = res.data.user_num
      this.profit_price = res.data.profit_price
    },

    async getSpreadVideoList (thepage) {
      const res = await fetch.getSpreadVideoList({
        page: thepage
      })
      console.log(res)
      return res
    }
  },

  components: {
    ExtensionList,
    Scroll,
    PageTip
  },

  activated () {
    this.loadData()
    this.getSpreadDataByUser()
  },
}

</script>

<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';

  .extensioncenter{
    .wrapper{
      height: 58vh;
      overflow: hidden;
    }
    .h100();
    .extension_head{
      width: 100%;
      height: 270px;
      background: #f4eeee;
      overflow: hidden;
      .extension_info{
        width: 94%;
        height: 230px;
        margin-top:20px;
        margin-left: 3%;
        background: white;
        border-radius: 8px;
        .extension_info_span1{
          width: 100%;
          height: 70px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 5px;
          span{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-left: 15px;
            img{
              width: 60px;
              height: 60px;
              border-radius: 50%;
              margin-right: 10px;
              font-size: 14px;
            }
            p{
              font-weight: 600;
            }
          }
          .turntrue{
            margin-right: 15px;
            font-size: 14px;
            font-weight: 600;
            color: #529b95;
          }
        }
        .extension_info_span2{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: 100%;
          height: 100px;
          p:first-child{
            color: #dc376d;
            font-size: 35px;
            font-weight: 600;
            margin-bottom: 5px;
          }
          p:last-child{
            font-size: 15px;
            color: #999999;
          }
        }
        .extension_info_span3{
          width: 100%;
          height: 55px;
          display: flex;
          flex-direction: row;
          span:first-child{
            border-right: 1px solid #f5efef;
            box-sizing: border-box;
          }
          span{
            width: 50%;
            text-align: center;
            line-height: 55px;
            p{
              font-size: 17px;
              font-weight: 600;
              color: black;
              strong{
                font-size: 17px;
                font-weight: 400;
                color: #dc376d;
              }
            }
          }
        }
      }
    }
  }
</style>
